<template>
    <div>
        <el-dialog
            title="关联属性"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <el-card class="table_tool_bar_wrap" shadow="never">
                <div class="base_wrap">
                    <div class="left">
                        <i class="el-icon-tickets" style="margin-right: 10px;"></i>
                        详情
                    </div>
                    <!-- 操作按钮 -->
                    <div class="right">
                        <el-button @click="handleAttrsByGroupVisible" type="text" size="small">添加属性</el-button>
                        <el-button @click="handleDelete" type="text" :disabled="selectionRows.length <= 0" size="small">删除</el-button>
                    </div>
                </div>
            </el-card>

            <!-- 表格 -->
            <el-table
                class="mt10"
                ref="table"
                size="medium"
                height="400"
                empty-text="暂无数据"
                element-loading-text="给我一点时间"
                fit border highlight-current-row
                v-loading="loading"
                :data="groupAttrs"
                @selection-change="handleSelection">

                <el-table-column type="selection" width="55" prop="selection" align="center"></el-table-column>
                <el-table-column label="属性名" prop="attrName" align="left"/>

                <el-table-column label="值类型" prop="valueType" align="left">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.valueType==0">单选</el-tag>
                        <el-tag v-else>多选</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="属性图标" prop="icon" align="left"/>
                <el-table-column label="可选值" prop="valueSelect" align="left" width="150">
                    <template slot-scope="scope">
                        <el-tooltip placement="top">
                            <div slot="content">
                                <span v-for="(i,index) in scope.row.valueSelect?scope.row.valueSelect.split(';'):''" :key="index">{{i}}<br/></span>
                            </div>
                            <el-tag v-if="scope.row.valueSelect">{{scope.row.valueSelect.split(";")[0]+'...'}}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="启用" prop="enable" align="left">
                    <template slot-scope="scope">
                        <i style="color:#67c23a" class="el-icon-success" v-if="scope.row.enable==1"></i>
                        <i class="el-icon-error" v-else></i>
                    </template>
                </el-table-column>

                <el-table-column label="操作" prop="btn" width="100px" align="left" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
            </div>

        </el-dialog>

        <!-- 添加分组属性 -->
        <el-dialog
            title="添加分组属性"
            :visible.sync="visibleAttrs" :close-on-click-modal="false" append-to-body>

            <!-- 基本搜索 -->
            <div class="container">

                <div class="body_wrap">

                    <el-form ref="searchForm" :inline="true" :model="searchForm" size="medium" label-width="">
                        <el-card class="table_tool_bar_wrap" shadow="never">
                            <div class="base_wrap">
                                <div class="left">
                                    <el-form-item label="" prop="keyword">
                                        <el-input placeholder="请输入：登录账号/姓名" v-model="searchForm.keyword" clearable/>
                                    </el-form-item>

                                    <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-form>

                    <!-- 表格 -->
                    <el-table
                        ref="table"
                        size="medium"
                        height="400"
                        class="mt10"
                        empty-text="暂无数据"
                        element-loading-text="给我一点时间"
                        fit border highlight-current-row
                        v-loading="attrsLoading"
                        :data="attrList"
                        @selection-change="handleSelectionRelation">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>

                        <el-table-column label="属性名" prop="attrName" align="left"></el-table-column>
                        <el-table-column label="属性图标" prop="icon" align="left"></el-table-column>
                        <el-table-column label="可选值列表" prop="valueSelect" align="left"></el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <TablePagination
                        :total.sync="total"
                        :page.sync="searchForm.page"
                        :limit.sync="searchForm.limit"
                        @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"/>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visibleAttrs = false">取 消</el-button>
                <el-button @click="handleSubmit('form')" type="primary" :loading="submitLoading">确认添加</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TablePagination from '@/views/components/table/table-pagination'
export default {
    components: {
        TablePagination
    },
    data() {
        return {
            visible: false,
            loading: false,

            groupId: null,
            groupAttrs: [],

            selectionRows: [],
            selectionRowsRelation: [],

            visibleAttrs: false,
            attrsLoading: false,
            submitLoading: false,
            attrList: [],
            total: 0,
            searchForm: {
                page: 1,
                limit: 10,
                sortColumns: null,
                sortType: null,
                keyword: null
            },

        }
    },

    methods: {
        init(id) {
            this.visible = true

            this.$nextTick(() => {
                this.groupId = id
                this.getGroupAttrs(id)
            })
        },

        handleSelection(selection) { // 多选
            this.selectionRows = selection
        },

        /**
         * 获取属性分组有关联的属性
         */
        async getGroupAttrs(id) {
            if (id) {
                const res = await this.$http({
                    url: '/mall/pmsattrgroup/getGroupAttrs/' + id,
                    method: 'GET'
                })
                this.groupAttrs = res.data
            }
        },

        /**
         * 删除
         */
        async handleDelete(row) {
            let ids = []
            if (row) {
                ids.push({ attrId: row.id, groupId: this.groupId })
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push({ attrId: item.id, groupId: this.groupId })
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要删除的记录！', type: 'info' });
            } else {
                const confirm = await this.$confirm('确定要删除？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/mall/pmsattrgroup/attr/relation/delete',
                        method: 'POST',
                        data: ids
                    })
                    if (this.ResultMessage(res)) {
                        this.init(this.groupId);
                    }
                }
            }
        },

        /**
         * 打开分组属性窗口
         */
        handleAttrsByGroupVisible(row) {
            this.visibleAttrs = true
            this.getAttrsByGroup()
        },

        /**
         * 获取属性分组没有关联的其他属性
         */
        async getAttrsByGroup() {
            const res = await this.$http({
                url: '/mall/pmsattrgroup/'+ this.groupId +'/noattr/relation',
                method: 'GET',
                params: this.searchForm
            })
            this.attrList = res.data.records
            this.total = res.data.total
        },
        handleSearch() { // 单条件搜索
            this.getAttrsByGroup()
        },
        handleSelectionRelation(selection) { // 多选
            this.selectionRowsRelation = selection
        },
        handleSizeChange(val) { // 每页数量
            this.searchForm.limit = val
            this.getAttrsByGroup()
        },
        handleCurrentChange(val) { // 页码
            this.searchForm.page = val
            this.getAttrsByGroup()
        },


        /**
         * 确认新增
         */
        async handleSubmit() {
            this.selectionRowsRelation
            if (this.selectionRowsRelation.length > 0) {
                let postData = [];
                this.selectionRowsRelation.forEach(item => {
                    postData.push({ attrId: item.id, groupId: this.groupId });
                });

                const res = await this.$http({
                    url: `/mall/pmsattrgroup/attr/relation`,
                    method: 'POST',
                    data: postData
                })
                if (this.ResultMessage(res)) {
                    this.init(this.groupId);
                    this.submitLoading = false
                    this.visibleAttrs = false
                } else {
                    this.submitLoading = false
                }
            }

        }

    }
};
</script>

<style lang="scss" scoped></style>
